<!-- 聊天消息组件 -->
<template>
  <view class="message-item">
    <!-- 消息日期 -->
    <text v-if="showTime" class="message-time">{{time}}</text>

    <!-- 微信提示消息 - 特殊样式 -->
    <view v-if="isWeChatTip" class="wechat-tip-container">
      <view class="wechat-tip-message">
        <view class="wechat-tip-text">
          <text class="tn-icon-wechat wechat-tip-icon"></text>
          <text>{{content}}</text>
        </view>
        <view class="wechat-tip-button" @tap="onAddWeChat">
          <text class="wechat-btn-text">添加微信</text>
        </view>
      </view>
    </view>

    <!-- 系统消息 - 居中显示，不带头像 -->
    <view v-else-if="isSystemMessage" class="system-message-container">
      <view class="system-message">
        <view class="system-message-text">
          <text class="tn-icon-info system-message-icon"></text>
          <text>{{content}}</text>
        </view>
      </view>
    </view>

    <!-- 微信申请消息 - 特殊处理 -->
    <view v-else-if="isWechatRequest" class="message-content" :class="isSelf ? 'message-self' : 'message-other'">
      <!-- 对方头像 - 只在对方消息显示 -->
      <image v-if="!isSelf" class="avatar left-avatar" :src="avatar" mode="aspectFill"></image>

      <view class="message-bubble-container" :class="{'self-container': isSelf}">
        <!-- 用户名 -->
        <text v-if="!isSelf" class="user-name">{{userName}}</text>

        <!-- 消息气泡 -->
        <view :class="['message-bubble', 'wechat-request-bubble', isSelf ? 'self-bubble' : 'other-bubble']" @longpress="onLongPress">
          <!-- 微信图标 -->
          <text class="tn-icon-wechat wechat-request-icon"></text>
          <text class="message-text wechat-request-text">
            <!-- 发送方显示"申请添加微信"，接收方显示"对方申请添加微信" -->
            <template v-if="isSelf">已发送微信添加申请</template>
            <template v-else>申请添加微信，是否同意</template>
          </text>
        </view>

        <!-- 接收方显示完善微信按钮 -->
        <view v-if="!isSelf" class="wechat-complete-button" @tap="onCompleteWechat">
          <text class="tn-icon-check wechat-complete-icon"></text>
          <text class="wechat-complete-text">等待确认</text>
        </view>

        <!-- 已读/未读状态 - 仅自己发送的消息显示 -->
        <text v-if="isSelf && sendStatus === 'success'" class="read-status">
          {{isRead ? '已读' : '未读'}}
        </text>
      </view>

      <!-- 自己的头像 - 只在自己消息显示 -->
      <image v-if="isSelf" class="avatar right-avatar" :src="avatar" mode="aspectFill"></image>
    </view>

    <!-- 已同意微信申请消息 - 特殊处理 -->
    <view v-else-if="isWechatApproved" class="message-content" :class="isSelf ? 'message-self' : 'message-other'">
      <!-- 对方头像 - 只在对方消息显示 -->
      <image v-if="!isSelf" class="avatar left-avatar" :src="avatar" mode="aspectFill"></image>

      <view class="message-bubble-container" :class="{'self-container': isSelf}">
        <!-- 用户名 -->
        <text v-if="!isSelf" class="user-name">{{userName}}</text>

        <!-- 消息气泡 -->
        <view :class="['message-bubble', 'wechat-approved-bubble', isSelf ? 'self-bubble' : 'other-bubble']" @longpress="onLongPress">
          <!-- 微信图标 -->
          <text class="tn-icon-wechat wechat-approved-icon"></text>
          <text class="message-text wechat-approved-text">
            <!-- 两方都显示已同意，接收方额外显示"点击查看" -->
            <template v-if="isSelf">已同意微信添加申请</template>
            <template v-else>已同意微信添加申请，点击查看</template>
          </text>
        </view>

        <!-- 接收方显示查看微信号按钮 -->
        <view v-if="!isSelf" class="wechat-view-button" @tap="onViewWechat">
          <text class="tn-icon-eye wechat-view-icon"></text>
          <text class="wechat-view-text">查看微信号</text>
        </view>

        <!-- 已读/未读状态 - 仅自己发送的消息显示 -->
        <text v-if="isSelf && sendStatus === 'success'" class="read-status">
          {{isRead ? '已读' : '未读'}}
        </text>
      </view>

      <!-- 自己的头像 - 只在自己消息显示 -->
      <image v-if="isSelf" class="avatar right-avatar" :src="avatar" mode="aspectFill"></image>
    </view>

    <!-- 已同意微信申请消息状态展示(类型80) - 特殊处理 -->
    <view v-else-if="isWechatApprovedStatus" class="message-content" :class="isSelf ? 'message-self' : 'message-other'">
      <!-- 对方头像 - 只在对方消息显示 -->
      <image v-if="!isSelf" class="avatar left-avatar" :src="avatar" mode="aspectFill"></image>

      <view class="message-bubble-container" :class="{'self-container': isSelf}">
        <!-- 用户名 -->
        <text v-if="!isSelf" class="user-name">{{userName}}</text>

        <!-- 消息气泡 -->
        <view :class="['message-bubble', 'wechat-request-bubble', isSelf ? 'self-bubble' : 'other-bubble']" @longpress="onLongPress">
          <!-- 微信图标 -->
          <text class="tn-icon-wechat wechat-request-icon"></text>
          <text class="message-text wechat-request-text">
            <!-- 与类型8保持一致的文本 -->
            <template v-if="isSelf">已发送微信添加申请</template>
            <template v-else>申请添加微信，是否同意</template>
          </text>
        </view>

        <!-- 只有接收方才显示已同意按钮 -->
        <view v-if="!isSelf" class="wechat-complete-button wechat-approved-status-button">
          <text class="tn-icon-check wechat-complete-icon"></text>
          <text class="wechat-complete-text">已同意</text>
        </view>

        <!-- 已读/未读状态 - 仅自己发送的消息显示 -->
        <text v-if="isSelf && sendStatus === 'success'" class="read-status">
          {{isRead ? '已读' : '未读'}}
        </text>
      </view>

      <!-- 自己的头像 - 只在自己消息显示 -->
      <image v-if="isSelf" class="avatar right-avatar" :src="avatar" mode="aspectFill"></image>
    </view>

    <!-- 普通聊天消息 - 用户消息 -->
    <view v-else :class="['message-content', isSelf ? 'message-self' : 'message-other']">
      <!-- 对方头像 - 只在对方消息显示 -->
      <image v-if="!isSelf" class="avatar left-avatar" :src="avatar" mode="aspectFill"></image>

      <!-- 图片消息使用单独的布局 -->
      <view v-if="messageType === 'image'" class="message-bubble-container" :class="{'self-container': isSelf}">
        <!-- 用户名 -->
        <text v-if="!isSelf" class="user-name">{{userName}}</text>

        <!-- 右侧操作菜单 - 仅自己发送的消息显示 -->
        <view v-if="isSelf" class="message-options">
          <view v-if="sendStatus === 'sending'" class="status-icon status-sending">
            <text class="tn-icon-loading tn-reverse-text-orange"></text>
          </view>
          <view v-else-if="sendStatus === 'failed'" class="status-icon status-failed" @tap="onResend">
            <text class="tn-icon-warning-fill tn-text-red"></text>
          </view>
        </view>

        <!-- 图片消息 - 不使用气泡 -->
        <view :class="['message-image-container', isRecalled ? 'recalled-image-container' : '', isViolation ? 'violation-image-container' : '']" @longpress="onLongPress">
          <!-- 未撤回且未违规状态显示图片 -->
          <image v-if="!isRecalled && !isViolation" class="message-image" :src="imageUrl" mode="widthFix" @tap="onImagePreview"></image>
          <!-- 撤回状态显示提示文本 -->
          <view v-else-if="isRecalled" class="recalled-image-text">
            <text class="tn-icon-warning"></text>
            <text>{{ isSelf ? '你撤回了一张图片' : '对方撤回了一张图片' }}</text>
          </view>
          <!-- 违规状态显示提示文本 -->
          <view v-else-if="isViolation" class="violation-image-text">
            <text class="tn-icon-warning-fill tn-text-red"></text>
            <text>图片内容不当，已被屏蔽</text>
          </view>
        </view>

        <!-- 已读/未读状态 - 仅自己发送的消息显示 -->
        <text v-if="isSelf && sendStatus === 'success'" class="read-status">
          {{isRead ? '已读' : '未读'}}
        </text>
      </view>

      <!-- 文本消息使用原有气泡样式 -->
      <view v-else class="message-bubble-container" :class="{'self-container': isSelf}">
        <!-- 用户名 -->
        <text v-if="!isSelf" class="user-name">{{userName}}</text>

        <!-- 右侧操作菜单 - 仅自己发送的消息显示 -->
        <view v-if="isSelf" class="message-options">
          <view v-if="sendStatus === 'sending'" class="status-icon status-sending">
            <text class="tn-icon-loading tn-reverse-text-orange"></text>
          </view>
          <view v-else-if="sendStatus === 'failed'" class="status-icon status-failed" @tap="onResend">
            <text class="tn-icon-warning-fill tn-text-red"></text>
          </view>
        </view>

        <!-- 消息气泡 -->
        <view :class="['message-bubble', isSelf ? 'self-bubble' : 'other-bubble', isRecalled ? 'recalled-bubble' : '', isViolation ? 'violation-bubble' : '']" @longpress="onLongPress">
          <!-- 文本消息 -->
          <text v-if="!messageType || messageType === 'text'" :class="['message-text', isRecalled ? 'recalled-text' : '', isViolation ? 'violation-text' : '']">
            <!-- 添加判断：如果消息被撤回，显示撤回提示；如果内容违规，显示违规提示；否则显示原始内容 -->
            <template v-if="isRecalled">
              <text class="tn-icon-warning" style="margin-right: 10rpx;"></text>
              {{ isSelf ? '你撤回了一条消息' : '对方撤回了一条消息' }}
            </template>
            <template v-else-if="isViolation">
              <text class="tn-icon-warning-fill tn-text-red" style="margin-right: 10rpx;"></text>
              内容不当，已被屏蔽
            </template>
            <template v-else>{{content}}</template>
          </text>
        </view>

        <!-- 已读/未读状态 - 仅自己发送的消息显示 -->
        <text v-if="isSelf && sendStatus === 'success'" class="read-status">
          {{isRead ? '已读' : '未读'}}
        </text>
      </view>

      <!-- 自己的头像 - 只在自己消息显示 -->
      <image v-if="isSelf" class="avatar right-avatar" :src="avatar" mode="aspectFill"></image>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ChatMessage',
  props: {
    // 消息数据
    message: {
      type: Object,
      required: true
    }
  },
  computed: {
    // 从message对象中提取各个属性
    id() {
      return this.message.id;
    },
    content() {
      return this.message.content;
    },
    time() {
      return this.message.time;
    },
    showTime() {
      return this.message.showTime;
    },
    isSelf() {
      return this.message.isSelf;
    },
    userId() {
      return this.message.userId;
    },
    userName() {
      return this.message.userName;
    },
    avatar() {
      return this.message.avatar || 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/f58cad729ce47acb65666e57496f5e2e0c8badfec8355cfc7d6f2645f8738e60.jpeg';
    },
    sendStatus() {
      return this.message.sendStatus;
    },
    isRead() {
      return this.message.isRead;
    },
    timestamp() {
      return this.message.timestamp;
    },
    messageType() {
      return this.message.messageType;
    },
    imageUrl() {
      return this.message.imageUrl;
    },
    isRecalled() {
      return this.message.isRecalled || this.message.status === 2;
    },
    // 添加对违规内容的判断
    isViolation() {
      return this.message.status === 3;
    },
    // 添加违规原因显示
    rejectedReason() {
      return this.message.rejectedReason;
    },
    // 判断是否为微信提示消息
    isWeChatTip() {
      return this.message.messageType === 'wechat_tip';
    },
    // 判断是否为系统消息
    isSystemMessage() {
      return this.message.isSystemMessage || this.message.messageType === 'system';
    },
    // 判断是否显示添加微信按钮
    showAddWeChatButton() {
      return this.message.showAddWeChatButton;
    },
    // 判断是否为微信申请消息
    isWechatRequest() {
      return this.message.messageType === 'wechatRequest';
    },
    // 判断是否为已同意微信申请消息
    isWechatApproved() {
      return this.message.messageType === 'wechatApproved' || this.message.type === 9;
    },
    // 添加新的计算属性判断是否为已同意微信申请消息(类型80)
    isWechatApprovedStatus() {
      return this.message.messageType === 'wechatApprovedStatus' || this.message.type === 80;
    }
  },
  methods: {
    // 获取当前用户信息的方法
    async getCurrentUserInfo() {
      try {
        // 通过dispatch方式主动获取最新的用户信息
        const userInfo = await this.$store.dispatch('user/getUserInfo');
        return userInfo || {};
      } catch (error) {
        console.error('获取用户信息失败:', error);
        // 获取失败时，尝试从state中读取
        const store = this.$root.$store || this.$store;
        return (store && store.state.user.userInfo) || {};
      }
    },
    // 长按消息
    onLongPress() {
      if (this.isSystemMessage || this.isWeChatTip) return; // 系统消息和微信提示不支持长按
      this.$emit('long-press', this.message);
    },

    // 重发消息
    onResend() {
      this.$emit('resend', this.message);
    },

    // 预览图片
    onImagePreview() {
      // 仅在未撤回、未违规状态且类型为图片时允许预览
      if (this.messageType === 'image' && this.imageUrl && !this.isRecalled && !this.isViolation) {
        this.$emit('preview-image', this.imageUrl);
      }
    },

    // 处理添加微信按钮点击
    onAddWeChat() {
      // 发出添加微信事件，只传递目标用户ID
      this.$emit('add-wechat', this.message.targetId);
    },

    // 处理完成微信申请
    async onCompleteWechat() {
      try {
        // 获取当前用户信息，包括微信号和权限状态
        const userInfo = await this.getCurrentUserInfo();
        const hasWechat = userInfo.wechat && userInfo.wechat.trim().length > 0;

        // 触发父组件显示自定义弹窗的事件
        this.$emit('complete-wechat', {
          showPopup: true, 
          messageId: this.message.id, 
          wechat: hasWechat ? userInfo.wechat : '', 
          targetId: this.message.userId
        });
      } catch (error) {
        console.error('处理微信申请失败:', error);
        uni.showToast({
          title: '获取用户信息失败，请重试',
          icon: 'none'
        });
      }
    },

    // 处理查看微信号按钮点击
    onViewWechat() {
      // 发出查看微信号事件，只传递目标用户ID
      this.$emit('view-wechat', this.message.targetId);
    }
  }
}
</script>

<style lang="scss">
/* 消息项样式 */
.message-item {
  padding: 8rpx 20rpx;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* 消息时间 */
.message-time {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  margin: 16rpx 0;
  background-color: rgba(2, 3, 3, 0.6);
  padding: 2rpx 20rpx;
  border-radius: 20rpx;
  display: inline-block;
  align-self: center;
}

/* 消息内容区 */
.message-content {
  display: flex;
  flex-direction: row;
  margin: 8rpx 0;
  width: 100%;
  box-sizing: border-box;
}

/* 自己发送的消息靠右 */
.message-self {
  flex-direction: row;
  justify-content: flex-end;
}

/* 对方发送的消息靠左 */
.message-other {
  flex-direction: row;
  justify-content: flex-start;
}

/* 头像 */
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 12rpx;
  background-color: #3A404B;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(179, 247, 60, 0.3);
  flex-shrink: 0;
}

/* 左侧头像 */
.left-avatar {
  margin-right: 20rpx;
}

/* 右侧头像 */
.right-avatar {
  margin-left: 20rpx;
}

/* 消息气泡容器 */
.message-bubble-container {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

/* 自己发送的消息气泡容器 */
.self-container {
  align-items: flex-end;
}

/* 用户名 */
.user-name {
  font-size: 24rpx;
  color: #B3F73C;
  margin-bottom: 6rpx;
  text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
}

/* 消息气泡 */
.message-bubble {
  padding: 18rpx 24rpx;
  border-radius: 12rpx;
  word-break: break-all;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.25);
  position: relative;
}

/* 自己发送的消息气泡 */
.self-bubble {
  background: linear-gradient(135deg, #B3F73C 0%, #93CC23 100%);
  border-top-right-radius: 2rpx;
  /* 添加小尾巴 */
  &:after {
    content: '';
    position: absolute;
    right: -8rpx;
    top: 12rpx;
    width: 16rpx;
    height: 16rpx;
    background: linear-gradient(135deg, #B3F73C 0%, #93CC23 100%);
    transform: rotate(45deg);
    z-index: -1;
  }
}

/* 对方发送的消息气泡 */
.other-bubble {
  background: linear-gradient(135deg, #3A404B 0%, #2C3039 100%);
  border-top-left-radius: 2rpx;
  /* 添加小尾巴 */
  &:after {
    content: '';
    position: absolute;
    left: -8rpx;
    top: 12rpx;
    width: 16rpx;
    height: 16rpx;
    background: linear-gradient(135deg, #3A404B 0%, #2C3039 100%);
    transform: rotate(45deg);
    z-index: -1;
  }
}

/* 消息文字 */
.message-text {
  font-size: 28rpx;
  line-height: 40rpx;
}

/* 自己发送的消息文字颜色 */
.self-bubble .message-text {
  color: #020303;
}

/* 对方发送的消息文字颜色 */
.other-bubble .message-text {
  color: #FFFFFF;
}

/* 消息状态图标 */
.status-icon {
  margin-top: 8rpx;
  align-self: center;
  font-size: 24rpx;
}

/* 已读/未读状态 */
.read-status {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6rpx;
  text-align: right;
}

/* 发送中状态 */
.status-sending {
  color: #ff9500;
}

/* 发送失败状态 */
.status-failed {
  color: #ff3b30;
}

/* 图片消息容器 */
.message-image-container {
  position: relative;
  margin: 4rpx 0;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
}

/* 消息图片 */
.message-image {
  display: block;
  max-width: 400rpx;
  max-height: 600rpx;
  border-radius: 12rpx;
}

/* 撤回消息气泡样式 */
.recalled-bubble {
  background: rgba(60, 60, 60, 0.5) !important;
  &:after {
    background: rgba(60, 60, 60, 0.5) !important;
  }
}

/* 撤回消息文本样式 */
.recalled-text {
  font-style: italic;
  color: rgba(180, 180, 180, 0.8) !important;
}

/* 撤回图片容器样式 */
.recalled-image-container {
  background: rgba(60, 60, 60, 0.5);
  min-width: 240rpx;
  min-height: 140rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 30rpx;
}

/* 撤回图片文本样式 */
.recalled-image-text {
  font-size: 26rpx;
  font-style: italic;
  color: rgba(180, 180, 180, 0.8);
  display: flex;
  flex-direction: row;
  align-items: center;

  .tn-icon-warning {
    margin-right: 10rpx;
    font-size: 28rpx;
  }
}

/* 违规图片容器样式 */
.violation-image-container {
  background-color: rgba(255, 77, 79, 0.1);
  border: 1px solid rgba(255, 77, 79, 0.3);
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 违规图片文本样式 */
.violation-image-text {
  color: #FF4D4F;
  font-size: 24rpx;
  display: flex;
  align-items: center;
}

/* 违规提示样式 */
.violation-tip {
  margin-top: 10rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10rpx 15rpx;
  background-color: rgba(255, 152, 0, 0.1);
  border-radius: 10rpx;
  max-width: 100%;
}

.violation-tip-text {
  font-size: 22rpx;
  color: #FFAB4D;
  margin-left: 10rpx;
}

/* 系统消息容器样式 */
.system-message-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 15rpx 0;
}

.system-message {
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.7) 0%, rgba(30, 30, 30, 0.8) 100%);
  border: 1px solid rgba(255, 171, 77, 0.4);
  border-radius: 16rpx;
  padding: 12rpx 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.4), 0 0 8rpx rgba(255, 171, 77, 0.2);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 85%;
  max-width: 550rpx;
}

.system-message-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #FFAB4D;
  line-height: 1.4;
  text-align: center;
  white-space: pre-line;
  width: 100%;
}

.system-message-icon {
  font-size: 28rpx;
  color: #FFAB4D;
  margin-right: 8rpx;
  text-shadow: 0 0 5px rgba(255, 171, 77, 0.5);
}

/* 微信提示消息容器样式 */
.wechat-tip-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 15rpx 0;
}

.wechat-tip-message {
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.7) 0%, rgba(30, 30, 30, 0.8) 100%);
  border: 1px solid rgba(179, 247, 60, 0.4);
  border-radius: 16rpx;
  padding: 12rpx 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.4), 0 0 8rpx rgba(179, 247, 60, 0.2);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 85%;
  max-width: 550rpx;
}

.wechat-tip-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #FFFFFF;
  line-height: 1.4;
  text-align: center;
  white-space: pre-line;
  width: 100%;
  margin-bottom: 10rpx;
}

.wechat-tip-icon {
  font-size: 28rpx;
  color: #B3F73C;
  margin-right: 8rpx;
  text-shadow: 0 0 5px rgba(179, 247, 60, 0.5);
}

.wechat-tip-button {
  margin-top: 2rpx;
  padding: 8rpx 24rpx;
  background: linear-gradient(135deg, #B3F73C 0%, #93CC23 100%);
  border-radius: 24rpx;
  align-self: center;
  box-shadow: 0 2rpx 6rpx rgba(179, 247, 60, 0.4);
  transition: transform 0.2s;
  transform: scale(1);
}

.wechat-tip-button:active {
  transform: scale(0.95);
  box-shadow: 0 1rpx 4rpx rgba(179, 247, 60, 0.4);
}

.wechat-btn-text {
  font-size: 26rpx;
  color: #020303;
  font-weight: bold;
}

/* 微信完成按钮样式 */
.wechat-complete-button {
  margin-top: 10rpx;
  padding: 10rpx 30rpx;
  background: linear-gradient(135deg, #B3F73C 0%, #93CC23 100%);
  border-radius: 40rpx;
  align-self: center;
  box-shadow: 0 4rpx 8rpx rgba(179, 247, 60, 0.4);
  transition: all 0.3s ease;
  transform: scale(1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1rpx solid rgba(0, 0, 0, 0.1);
}

.wechat-complete-button:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 4rpx rgba(179, 247, 60, 0.4);
}

.wechat-complete-icon {
  font-size: 28rpx;
  color: #020303;
  margin-right: 8rpx;
}

.wechat-complete-text {
  font-size: 26rpx;
  color: #020303;
  font-weight: bold;
}

/* 微信申请消息样式 */
.wechat-request-bubble {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 30rpx;
  border: none;
  position: relative;
  overflow: visible;
}

/* 对方发送的申请消息边框 */
.other-bubble.wechat-request-bubble {
  background: linear-gradient(135deg, rgba(58, 64, 75, 0.95) 0%, rgba(44, 48, 57, 0.95) 100%);
  border: 1px solid rgba(179, 247, 60, 0.5);
}

/* 对方发送的申请消息的发光效果 */
.other-bubble.wechat-request-bubble:before {
  content: '';
  position: absolute;
  top: -2rpx;
  left: -2rpx;
  right: -2rpx;
  bottom: -2rpx;
  border-radius: 12rpx;
  background: transparent;
  border-top-left-radius: 2rpx;
  z-index: -1;
  box-shadow: 0 0 20rpx 2rpx rgba(179, 247, 60, 0.7);
  animation: pulse-green 2s infinite alternate;
  pointer-events: none;
}

/* 自己发送的申请消息边框 */
.self-bubble.wechat-request-bubble {
  background: linear-gradient(135deg, rgba(179, 247, 60, 0.95) 0%, rgba(147, 204, 35, 0.95) 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* 自己发送的申请消息的发光效果 */
.self-bubble.wechat-request-bubble:before {
  content: '';
  position: absolute;
  top: -2rpx;
  left: -2rpx;
  right: -2rpx;
  bottom: -2rpx;
  border-radius: 12rpx;
  background: transparent;
  border-top-right-radius: 2rpx;
  z-index: -1;
  box-shadow: 0 0 20rpx 2rpx rgba(147, 204, 35, 0.7);
  animation: pulse-self 2s infinite alternate;
  pointer-events: none;
}

/* 确保三角形尾巴正确显示 */
.other-bubble.wechat-request-bubble:after {
  z-index: 1;
  border: 1px solid rgba(179, 247, 60, 0.5);
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(58, 64, 75, 0.95) 0%, rgba(44, 48, 57, 0.95) 100%);
}

.self-bubble.wechat-request-bubble:after {
  z-index: 1;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(179, 247, 60, 0.95) 0%, rgba(147, 204, 35, 0.95) 100%);
}

/* 微信图标样式 */
.wechat-request-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
  text-shadow: 0 0 8rpx rgba(179, 247, 60, 0.3);
}

.self-bubble .wechat-request-icon {
  color: #020303;
}

.other-bubble .wechat-request-icon {
  color: #B3F73C;
}

.wechat-request-text {
  font-weight: 500;
  font-size: 28rpx;
}

/* 脉动动画 */
@keyframes pulse-green {
  from {
    opacity: 0.7;
    box-shadow: 0 0 15rpx 2rpx rgba(179, 247, 60, 0.5);
  }
  to {
    opacity: 1;
    box-shadow: 0 0 25rpx 4rpx rgba(179, 247, 60, 0.8);
  }
}

@keyframes pulse-self {
  from {
    opacity: 0.7;
    box-shadow: 0 0 15rpx 2rpx rgba(147, 204, 35, 0.5);
  }
  to {
    opacity: 1;
    box-shadow: 0 0 25rpx 4rpx rgba(147, 204, 35, 0.8);
  }
}

/* 已同意微信申请消息样式 */
.wechat-approved-bubble {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 30rpx;
  border: none;
  position: relative;
  overflow: visible;
}

/* 对方发送的已同意消息 */
.other-bubble.wechat-approved-bubble {
  background: linear-gradient(135deg, rgba(58, 64, 75, 0.95) 0%, rgba(44, 48, 57, 0.95) 100%);
  border: 1px solid rgba(0, 183, 255, 0.5);
}

/* 对方发送的已同意消息的发光效果 */
.other-bubble.wechat-approved-bubble:before {
  content: '';
  position: absolute;
  top: -2rpx;
  left: -2rpx;
  right: -2rpx;
  bottom: -2rpx;
  border-radius: 12rpx;
  background: transparent;
  border-top-left-radius: 2rpx;
  z-index: -1;
  box-shadow: 0 0 20rpx 2rpx rgba(0, 183, 255, 0.7);
  animation: pulse-blue 2s infinite alternate;
  pointer-events: none;
}

/* 自己发送的已同意消息 */
.self-bubble.wechat-approved-bubble {
  background: linear-gradient(135deg, rgba(0, 183, 255, 0.95) 0%, rgba(0, 144, 201, 0.95) 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* 自己发送的已同意消息的发光效果 */
.self-bubble.wechat-approved-bubble:before {
  content: '';
  position: absolute;
  top: -2rpx;
  left: -2rpx;
  right: -2rpx;
  bottom: -2rpx;
  border-radius: 12rpx;
  background: transparent;
  border-top-right-radius: 2rpx;
  z-index: -1;
  box-shadow: 0 0 20rpx 2rpx rgba(0, 183, 255, 0.7);
  animation: pulse-blue 2s infinite alternate;
  pointer-events: none;
}

/* 确保三角形尾巴正确显示 - 已同意消息 */
.other-bubble.wechat-approved-bubble:after {
  z-index: 1;
  border: 1px solid rgba(0, 183, 255, 0.5);
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(58, 64, 75, 0.95) 0%, rgba(44, 48, 57, 0.95) 100%);
}

.self-bubble.wechat-approved-bubble:after {
  z-index: 1;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(0, 183, 255, 0.95) 0%, rgba(0, 144, 201, 0.95) 100%);
}

/* 已同意微信图标样式 */
.wechat-approved-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
  text-shadow: 0 0 8rpx rgba(0, 183, 255, 0.5);
}

.self-bubble .wechat-approved-icon {
  color: #FFFFFF;
}

.other-bubble .wechat-approved-icon {
  color: #00B7FF;
}

.wechat-approved-text {
  font-weight: 500;
  font-size: 28rpx;
}

/* 查看微信号按钮样式 */
.wechat-view-button {
  margin-top: 10rpx;
  padding: 10rpx 30rpx;
  background: linear-gradient(135deg, #00B7FF 0%, #0090C9 100%);
  border-radius: 40rpx;
  align-self: center;
  box-shadow: 0 4rpx 8rpx rgba(0, 183, 255, 0.4);
  transition: all 0.3s ease;
  transform: scale(1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.wechat-view-button:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 4rpx rgba(0, 183, 255, 0.4);
}

.wechat-view-icon {
  font-size: 28rpx;
  color: #FFFFFF;
  margin-right: 8rpx;
}

.wechat-view-text {
  font-size: 26rpx;
  color: #FFFFFF;
  font-weight: bold;
}

/* 已同意状态按钮样式 - 类型80 */
.wechat-approved-status-button {
  /* 继承wechat-complete-button的基本样式，但添加一些区别 */
  background: linear-gradient(135deg, #B3B3B3 0%, #8A8A8A 100%); /* 使用灰色渐变表示已完成状态 */
  opacity: 0.8; /* 略微透明表示不可点击状态 */
  cursor: not-allowed; /* 不可点击的光标样式 */
  pointer-events: none; /* 禁用所有点击事件 */
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); /* 减弱阴影效果 */
}

/* 蓝色脉动动画 */
@keyframes pulse-blue {
  from {
    opacity: 0.7;
    box-shadow: 0 0 15rpx 2rpx rgba(0, 183, 255, 0.5);
  }
  to {
    opacity: 1;
    box-shadow: 0 0 25rpx 4rpx rgba(0, 183, 255, 0.8);
  }
}
</style>
